<template>
    <div class="login">
        <div class="comp">
            <div class="phone">
                <input type="number" name="手机号码" placeholder="请输入手机" maxlength="11" v-model="phone" @keyup="input(phone)">
                <div class="code-text" :class="{active:numChange==true}">
                    <span>发送验证码</span>
                </div>
            </div>
            <div class="code">
                <input type="number" name="短信验证码" placeholder="请输入短信验证码" maxlength="6" v-model="code" @keyup="input(code)">
            </div>
            <div class="lg-btn">
                <button class="btn" :class="{active:lgChange==true}">登录</button>
            </div>
           
        </div>

        <div class="comp-text">未注册的手机号将自动生成新账号</div>

        <footer>
            <div class="copy">
                <span class="text">© 千影电影 客服电话：</span>
                <a class="tel" href="tel:400-670-5335">400-670-5335</a>
            </div>
        </footer>

    </div>
</template>
<script>
import { Dialog } from 'vant';
export default {
    data(){
        return{
            numChange:false,
            lgChange:false,
            phone:'',
            code:'',
        }
    },
    methods:{
        input(){            
            // 手机号码+验证码的正则表达式
            let phoneReg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/
            let codeReg=/^[0-9]{6}$/
            // 限制手机号码+验证码的输入长度
            this.phone=this.phone.slice(0,11)
            this.code=this.code.slice(0,6)

            if(this.phone.length==11){
                if(phoneReg.test(this.phone)){
                    this.numChange=true
                }else{
                    this.numChange=false,
                    Dialog.alert({
                        message: '请输入正确的手机号码',
                        // theme: 'round-button',
                    }).then(() => {
                        // on close
                    });
                }
            }else{
                this.numChange=false
            }
            
            
            if(this.code.length==6){
                // 当输入的手机号码以及验证码格式正确，登录按钮高亮
                if(phoneReg.test(this.phone) && codeReg.test(this.code)){
                    this.lgChange=true
                }
                if(codeReg.test(this.code)===false){
                    this.lgChange=false
                    Dialog.alert({
                        message: '验证码输入错误',
                        // theme: 'round-button',
                    }).then(() => {
                        // on close
                    });
                }
            }else{
                this.lgChange=false
            }

        },
    },
    components:{
        [Dialog.Component.name]: Dialog.Component,
    }
}
</script>

<style lang="less" scoped>
.login{
    .comp{
        padding: 1.2em;
        .phone,.code{
            width: 100%;
            position: relative;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            padding-bottom: 9px;
        }
        .phone{
            .code-text{
                margin-left: 6px;
                padding: 1.2px 3px ;
                border: 1px solid #dcdcdc;
                border-radius: 2px;
                background: #dcdcdc;
                span{
                    font-size: 12px;
                }
            }
            .active{
                background: 0;
                color: #df2d2d;
                border: 1px solid #df2d2d;
            }
        }
        .code{
            margin-top: 15px;
        }
        input{
            flex: 1;
            font-size: 15px;
        }
        .lg-btn{
            margin-top: 30px;
            .btn{
                text-align: center;
                color: #999;
                background: #e5e5e5;
                height: 2.6em;
                line-height: 2.6em;
                border-radius: 0.3em;
                width: 100%;
                display: block;
                border: none;
                cursor: pointer;
                font-size: 15px;
            }
            .active{
                background: #df2d2d;
                color: white;
            }
        }
    }
    .comp-text{
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #999999;
        text-align: center;
    }

    footer{
        margin-top: 15px;
        padding: 0 10px 20px;
        background-color: #f8f8f8;
        .copy{
            text-align: center;
            .tel{
                color: #dd001b;
            }
        }
    }
}
</style>